<template>
  <div class="field-select">
    <div class="field-menu">
      <div class="title">字段类型选取</div>
      <div :class="{'active': fieldType === 1}" class="field-menu-item" @click="changeFieldType(1)">
        <img :src="fieldType === 1?singleIconActive:singleIcon" class="icon" alt="">
        <span class="content">单选题</span>
        <img :src="fieldType === 1?tipIconActive:tipIcon" class="tip" alt="">
      </div>
      <div :class="{'active': fieldType === 2}" class="field-menu-item" @click="changeFieldType(2)">
        <img :src="fieldType === 2?dropdownIconActive:dropdownIcon" class="icon" alt="">
        <span class="content">下拉框</span>
        <img :src="fieldType === 2?tipIconActive:tipIcon" class="tip" alt="">
      </div>
      <div :class="{'active': fieldType === 3}" class="field-menu-item" @click="changeFieldType(3)">
        <img :src="fieldType === 3?checkedIconActive:checkedIcon" class="icon" alt="">
        <span class="content">多选框</span>
        <img :src="fieldType === 3?tipIconActive:tipIcon" class="tip" alt="">
      </div>
      <div :class="{'active': fieldType === 4}" class="field-menu-item" @click="changeFieldType(4)">
        <img :src="fieldType === 4?inputIconActive:inputIcon" class="icon" alt="">
        <span class="content">单项填空</span>
        <img :src="fieldType === 4?tipIconActive:tipIcon" class="tip" alt="">
      </div>
    </div>
    <div class="field-content">
      <div>2</div>
    </div>
  </div>
</template>
<script>
import singleIcon from '@/assets/setting/single.png';
import singleIconActive from '@/assets/setting/single_active.png';
import checkedIcon from '@/assets/setting/checked.png';
import checkedIconActive from '@/assets/setting/checked_active.png';
import dropdownIcon from '@/assets/setting/dropdown.png';
import dropdownIconActive from '@/assets/setting/dropdown_active.png';
import inputIcon from '@/assets/setting/input.png';
import inputIconActive from '@/assets/setting/input_active.png';
import tipIcon from '@/assets/setting/tip.png';
import tipIconActive from '@/assets/setting/tip_active.png';
export default {
  name: 'FieldSelect',
  data() {
    return {
      singleIcon, singleIconActive, tipIcon, tipIconActive, inputIcon,
      checkedIcon, checkedIconActive, dropdownIcon, dropdownIconActive, inputIconActive,
      fieldType: 1 // 1:单选题 2:下拉框 3:多选框 4:单项填空
    };
  },
  methods: {
    changeFieldType(type) {
      this.fieldType = type;
    }
  }
};
</script>
<style lang="scss" scoped>
.field-select {
  background:rgba(255,255,255,1);
  border-radius:4px;
  border:1px solid #CACCD4;
  padding: 25px 0;
  display: flex;
}
.field-menu {
  .title {
    font-size:20px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:20px;
    margin-left: 24px;
    margin-bottom: 19px;
  }
  .field-menu-item {
    display: flex;
    align-items: center;
    width: 160px;
    height: 42px;
    border-radius:0px 100px 100px 0px;
    margin-bottom: 24px;
    background:#fff;
    position: relative;
    cursor: pointer;
    .content {
      margin-left: 16px;
      font-size:16px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:#333333;
      line-height:1.2;
      margin-right: 3px;
      white-space: nowrap;
    }
    &.active {
      background:rgba(235,238,253,1);
      .content{ color: #406EFF; }
    }
    .tip,.icon {
      width: 16px;
      height: 16px;
    }
    .icon {
      margin-left: 24px;
    }
    &::after {
      content: '';
      width: 112px;
      background-color: #EBEEFD;
      height: 1px;
      position: absolute;
      bottom: -12px;
      left: 24px;
    }
  }
}
</style>
